<template>
  <view class="my-health-container">
    <!-- 血压 -->
    <div class="health-card mt-30" @click="gotoDetail('xueya')">
      <div class="card-header">
        <div class="card-title">
          <image src="/static/new/xueya.png" class="card-icon" />
          <span class="card-name">血压</span>
        </div>
        <div class="card-date">2023-07-26 15:38</div>
      </div>

      <div class="card-content mt-8">
        <div class="card-value-group">
          <span class="value-label">舒张压（mmHg）</span>
          <span class="value-number">59</span>
        </div>

        <div class="card-right-group">
          <div class="card-value-group">
            <span class="value-label">收缩压（mmHg）</span>
            <span class="value-number">59</span>
          </div>


          <u-icon name="arrow-right"></u-icon>
        </div>
      </div>
    </div>

    <!-- 心率 -->
    <div class="health-card mt-30" @click="gotoDetail('xinlv')">
      <div class="card-header">
        <div class="card-title">
          <image src="/static/new/xinlv.png" class="card-icon" />
          <!-- <img src="/static/home/xinlv.png" class="card-icon" /> -->
          <span class="card-name">心率</span>
        </div>
        <div class="card-date">2023-07-26 15:38</div>
      </div>

      <div class="card-content mt-8">
        <div class="card-value-group">
          <span class="value-label">测试值（次/分）</span>
          <span class="value-number">59</span>
        </div>

        <div class="card-right-group">
          <div class="card-value-group">
            <span class="value-label">正常（次/分）</span>
            <span class="value-number">59</span>
          </div>
          <u-icon name="arrow-right"></u-icon>
        </div>
      </div>
    </div>

    <!-- 内篓声音 -->
    <div class="health-card mt-30" @click="gotoDetail('neilou')">
      <div class="card-header">
        <div class="card-title">
          <image src="/static/new/nl.png" class="card-icon" />
          <span class="card-name">内篓声音</span>
        </div>
        <div class="card-date">2023-07-26 15:38</div>
      </div>

      <div class="card-simple-content mt-8">
        <div></div>
        <div class="simple-value">正常</div>
        <u-icon name="arrow-right"></u-icon>
      </div>
    </div>

    <!-- 训练指标 -->
    <div class="health-card mt-30" @click="gotoDetail('zhibiao')">
      <div class="card-header">
        <div class="card-title">
          <img src="/static/new/xlzb.png" class="card-icon" />
          <span class="card-name">训练指标</span>
        </div>
        <div class="card-date">2023-07-26 15:38</div>
      </div>

      <div class="card-simple-content mt-8">
        <div></div>
        <div class="simple-value">已完成99%</div>
        <u-icon name="arrow-right"></u-icon>
      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {
      statusBarHeight: 0,
      activeTab: 'basic'
    }
  },
  onLoad() {
    this.getSystemInfo()
  },
  methods: {
    getSystemInfo() {
      const systemInfo = uni.getSystemInfoSync()
      this.statusBarHeight = systemInfo.statusBarHeight || 0
    },
    goBack() {
      uni.navigateBack()
    },
    switchTab(tab) {
      this.activeTab = tab
    },
    editBasicInfo() {
      uni.navigateTo({
        url: '/pages/myInfo/edit'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.my-health-container {
  min-height: 100vh;
  background: #F5F5F5;
}

.status-bar {
  background: #FFFFFF;
}

.health-navbar {
  background: #FFFFFF;
  height: 88rpx;
  border-bottom: 1px solid #E5E5E5;
}

.health-navbar .navbar-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 32rpx;
}

.nav-left {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  font-size: 48rpx;
  color: #333333;
  font-weight: bold;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

.nav-right {
  display: flex;
  align-items: center;
}

.nav-action-btn {
  width: 60rpx;
  height: 60rpx;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 16rpx;
}

.action-dots,
.action-location {
  font-size: 24rpx;
  color: #666666;
}

.tab-bar {
  background: #FFFFFF;
  display: flex;
  height: 88rpx;
  align-items: center;
  padding: 0 32rpx;
}

.tab-item {
  flex: 1;
  text-align: center;
  position: relative;
}

.tab-item.active .tab-text {
  color: #2196F3;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: -16rpx;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background: #2196F3;
  border-radius: 2rpx;
}

.tab-text {
  font-size: 32rpx;
  color: #666666;
}

.content-area {
  padding: 32rpx;
}

.info-section {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 40rpx;
}

.info-item {
  margin-bottom: 32rpx;
}

.info-item:last-child {
  margin-bottom: 0;
}

.info-label {
  font-size: 40rpx;
  font-weight: bold;
  color: #333333;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.info-row:last-child {
  margin-bottom: 0;
}

.info-text {
  font-size: 32rpx;
  color: #333333;
  margin-right: 16rpx;
  min-width: 200rpx;
}

.info-value {
  font-size: 32rpx;
  color: #666666;
  flex: 1;
}

.edit-button .primary-btn {
  width: 100%;
  height: 96rpx;
  background: #4ECDC4;
  border-radius: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-text {
  font-size: 32rpx;
  color: #FFFFFF;
  font-weight: 500;
}

.health-item {
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
}

.health-header {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.health-icon {
  width: 40rpx;
  height: 40rpx;
  background: #E3F2FD;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16rpx;
  font-size: 20rpx;
  color: #2196F3;
}

.health-details {
  flex: 1;
}

.health-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 8rpx;
}

.health-time {
  font-size: 24rpx;
  color: #999999;
}

.health-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}

.health-status.normal {
  background: rgba(76, 175, 80, 0.1);
  color: #4CAF50;
}

.health-status.high {
  background: rgba(255, 152, 0, 0.1);
  color: #FF9800;
}

.health-status.low {
  background: rgba(255, 152, 0, 0.1);
  color: #FF9800;
}

.health-value {
  display: flex;
  align-items: baseline;
  margin-bottom: 16rpx;
}

.value-main {
  font-size: 48rpx;
  font-weight: bold;
  color: #2196F3;
  margin-right: 8rpx;
}

.value-unit {
  font-size: 24rpx;
  color: #999999;
}

.health-chart {
  height: 60rpx;
  display: flex;
  align-items: center;
}

.chart-line {
  width: 100%;
  height: 2rpx;
  background: linear-gradient(to right, #2196F3 0%, #4CAF50 50%, #FF9800 100%);
  border-radius: 1rpx;
}

.chart-bar {
  width: 200rpx;
  height: 16rpx;
  background: linear-gradient(to right, #00E676 0%, #FFEB3B 50%, #FF5722 100%);
  border-radius: 8rpx;
  position: relative;
}

.chart-bar::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 60%;
  transform: translateY(-50%);
  width: 20rpx;
  height: 20rpx;
  background: #FF9800;
  border-radius: 50%;
}


.home-page {
  background-color: rgba(243, 243, 243, 1);
  // min-height: 100vh;
  padding-bottom: 200rpx;
}

.home-swiper {
  height: 558rpx;
}

.health-card {
  background-color: white;
  border-radius: 20rpx;
  margin-left: 48rpx;
  margin-right: 48rpx;
  padding: 30rpx;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  display: flex;
  align-items: center;
}

.card-icon {
  width: 108rpx;
  height: 108rpx;
}

.card-name {
  font-size: 40rpx;
  font-weight: 600;
  color: #4b4866;
  margin-left: 34rpx;
}

.card-date {
  color: #4b4866;
  opacity: 0.44;
  font-size: 36rpx;
}

.card-content {
  display: flex;
  justify-content: space-between;
}

.card-value-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.value-label {
  font-size: 36rpx;
  color: #4b4866;
}

.value-number {
  font-size: 40rpx;
  color: #4b4866;
  margin-top: 12rpx;
  font-weight: 550;
}

.card-right-group {
  display: flex;
  align-items: center;
}

.right-arrow {
  width: 58rpx;
  height: 90rpx;
  margin-left: 20rpx;
}

.card-simple-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.simple-value {
  font-size: 50rpx;
  color: #4b4866;
  font-weight: 550;
}

.mt-30 {
  margin-top: 30rpx;
}

.mt-8 {
  margin-top: 8rpx;
}

.bottom-tabbar {
  padding-top: 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  // height: 50px;
  background: #ffffff;
  display: flex;
  align-items: center;
  border-top: 1px solid #e5e5e5;
  padding-bottom: env(safe-area-inset-bottom);

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .tab-icon {
      width: 72rpx;
      height: 72rpx;
      margin-bottom: 8rpx;
      border-radius: 8rpx;

      &.home-icon {
        // background: #2196f3;
      }

      &.mall-icon {
        background: #cccccc;
      }

      &.consultation-icon {
        background: #cccccc;
      }

      &.profile-icon {
        background: #cccccc;
      }
    }

    .tab-text {
      font-size: 36rpx;
      color: rgb(153, 153, 153);
    }

    &.active .tab-text {
      color: #006BFF;
    }
  }
}
</style>
